<template>
  <div>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <!-- <el-menu :default-active="activeIndex + userId" router class="el-menu-vertical-demo" @select="handleSelect">
          <el-menu-item :index="profile + userId">
          <i class="el-icon-user"></i>
            <span slot="title">我的信息</span>
          </el-menu-item>
          <el-menu-item :index="passwordCheck + userId">
          <i class="el-icon-lock"></i>
            <span slot="title">密码修改</span>
          </el-menu-item>
          <el-menu-item :index="mailCheck + userId">
          <i class="el-icon-message"></i>
            <span sslot="title">邮箱修改</span>
          </el-menu-item>
          <el-menu-item :index="messageCenter + userId">
            <i class="el-icon-bell"></i>
            <span slot="title">我的消息</span>
          </el-menu-item>
        </el-menu> -->
        <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect">
          <el-menu-item index="profile">
          <i class="el-icon-user"></i>
            <span slot="title">我的信息</span>
          </el-menu-item>
          <el-menu-item index="passwordCheck">
          <i class="el-icon-lock"></i>
            <span slot="title">密码修改</span>
          </el-menu-item>
          <el-menu-item index="mailCheck">
          <i class="el-icon-message"></i>
            <span sslot="title">邮箱修改</span>
          </el-menu-item>
          <!-- <el-menu-item index="messageCenter">
            <i class="el-icon-bell"></i>
            <span slot="title">我的消息</span>
          </el-menu-item> -->
        </el-menu>
      </el-aside>
      <!-- 主体部分 -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'UserCesnter',
  data () {
    return {
      userId: '',
      userName: 'admin',
      // index: this.$route.params.aaId
      passwordCheck: '/userCenter/passwordCheck/',
      mailCheck: '/userCenter/mailCheck/',
      messageCenter: '/userCenter/messageCenter/',
      profile: '/userCenter/profile/',
      activeIndex: 'profile' // 对应侧边栏显示有点问题 要刷新
    }
  },
  beforeUpdate () {
    this.changeActive()
    console.log('from-update-activeIndex: ', this.activeIndex)
  },
  mounted () {
    this.userId = this.$route.params.id
    this.changeActive()
    console.log('from-mounted-activeIndex: ', this.activeIndex)
  },
  methods: {
    changeActive () {
      var path = this.$route.path
      var Arr = path.split('/')
      for (var i = 0; i < Arr.length; i++) {
        if (Arr[i] === 'userCenter') {
          this.activeIndex = Arr[i + 1]
          break
        }
      }
    },
    // 监听侧边栏
    handleSelect (key, keyPath) {
      console.log('key: ', key)
      console.log('keyPath: ', keyPath)
      if (key === 'profile') {
        this.$router.push(this.profile + this.userId)
      }
      if (key === 'passwordCheck') {
        this.$router.push(this.passwordCheck + this.userId)
      }
      if (key === 'mailCheck') {
        this.$router.push(this.mailCheck + this.userId)
      }
      if (key === 'messageCenter') {
        this.$router.push(this.messageCenter + this.userId)
      }
    }
  }

}
</script>
<style>
.el-aside {
  margin-left: 10%;
}
.el-aside .el-menu{
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15)
}

.el-container{
    height: 100%;
    border-top: 1px solid #f3f3f3;
}
.el-aside{
  padding-top: 20px;
}
</style>
